<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form style="" :model="requestParameters" ref="requestParameters">
          <div class="filter-container">
            <el-row :gutter="20">
              <el-form-item>
                <span>{{ $t("table.labelName") }}</span>
                <el-input
                  v-model="requestParameters.tags"
                  placeholder="请输入"
                  style="width: 150px; margin-left: 40px; margin-right: 10px"
                ></el-input>
                <MyCity style="display: inline" v-model="pc.provAndCity" />
                <span style="margin-left: 10px"
                  >{{ $t("table.company") }}:</span
                >
                <el-input
                  style="width: 150px; margin-left: 40px"
                  v-model="requestParameters.shortName"
                ></el-input
                ><span style="margin-left: 10px">{{ $t("table.states") }}</span>
                <el-select
                  v-model="requestParameters.state"
                  style="width: 100px; margin-left: 40px"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <span style="margin-left: 10px">{{ $t("table.states") }}</span>
                <el-button
                  style="margin-left: 20px"
                  class="filter-item"
                  size="small"
                  @click="dleHandleFilter"
                  >{{ $t("table.clear") }}</el-button
                >
                <el-button
                  style="margin-left: 20px"
                  class="filter-item"
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="handleFilter"
                  >{{ $t("table.search") }}</el-button
                >
              </el-form-item>
            </el-row>

            <el-button
              class="filter-item fr"
              size="small"
              style="margin-left: 10px"
              type="primary"
              icon="el-icon-edit"
              @click="handleChange('add')"
              >{{ $t("table.adduser") }}</el-button
            >
          </div>
        </el-form>
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
        <!-- end -->
        <!-- 数据 -->
        <el-table
          :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%"
          border
        >
          <el-table-column align="center" :label="$t('table.id')">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.number')">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('table.company')">
            <template slot-scope="scope">
              <span>{{ scope.row.company }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.tags')">
            <template slot-scope="scope">
              <span>{{ scope.row.tags }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.creatorID')">
            <template slot-scope="scope">
              <span>{{ scope.row.creatorID }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.addDate')">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.remarks')">
            <template slot-scope="scope">
              <span>{{ scope.row.remarks }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" :label="$t('table.state')">
            <template slot-scope="scope">
              <span v-html="formatterStatus(scope.row.state)" />
            </template>
          </el-table-column>
          <!-- 按钮 -->
          <el-table-column
            align="center"
            :label="$t('table.actions')"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                plain
                @click="handleChange(scope.row.id)"
              >
              </el-button>
              <el-button
                type="success"
                icon="el-icon-check"
                v-if="scope.row.state == 0"
                @click="reState(scope.row)"
                plain
                circle
              >
              </el-button>
              <el-button
                type="warning"
                icon="el-icon-close"
                v-if="scope.row.state == 1"
                @click="reState(scope.row)"
                plain
                circle
              >
              </el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="removeUser(scope.row.id)"
                plain
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="total"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
        <CompanysAdd
          ref="editCompanys"
          :formData.sync="requestParameters"
          :titleInfo="titleInfo"
          :ruleInline="ruleInline"
          :formBase="formData"
          :provAndCity="provAndCity"
          @handleCloseModal="handleCloseModal"
          @newDataes="handleLoadDataList"
          close-on-click-modal
        />
      </el-card>
    </div>
  </div>
</template>
<script>
import MyCity from '@/module-hmmm/components/MyCity.vue' // 市区选择组件
import { status } from '@/api/hmmm/constants' // 枚举
import PageTool from '@/module-manage/components/page-tool' // 分页组件
import { list, remove, detail, disabled } from '@/api/hmmm/companys' // api接口
import CompanysAdd from '../components/companys-add' // 弹层组件
export default {
  name: 'Companys',
  components: {
    CompanysAdd,
    PageTool,
    MyCity
  },
  data () {
    return {
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      tableKey: 0,
      listLoading: true,
      total: null,
      dataList: [],
      alertText: '',
      requestParameters: {
        page: 1,
        pagesize: 10
      },
      titleInfo: {
        pageTitle: '用户', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        isFamous: '',
        shortName: '',
        company: '',
        city: '',
        province: '',
        tags: '',
        remarks: ''
      },
      pc: {
        page: 1,
        pagesize: 10,
        provAndCity: {}
      },
      provAndCity: {},
      state: '',
      ruleInline: {
        // 表单验证
        company: [
          { required: true, message: '企业名称不能为空', trigger: 'blur' }
        ],
        shortName: [
          { required: true, message: '所属公司不能为空', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '城市地区不能为空', trigger: 'blur' }
        ],
        tags: [{ required: true, message: '方向不能为空', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getList(this.requestParameters)
  },
  methods: {
    // 获取公司列表
    async getList (params) {
      this.listLoading = true
      const { data } = await list(params)
      this.dataList = data.items
      this.total = data.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 新增用户刷新列表
    handleLoadDataList () {
      this.getList(this.requestParameters)
    },
    // 枚举
    formatterStatus (row, column, cellValue, index) {
      const obj = status.find((item) => item.value === row)
      return obj ? obj.label : '未知'
    },
    // 清空原来的
    query () {
      this.formData = {
        isFamous: '',
        shortName: '',
        company: '',
        city: '',
        province: '',
        tags: '',
        remarks: ''
      }
    },
    // 新增用户、编辑用户
    handleChange (id) {
      this.query()
      if (id === 'add') {
        this.$refs.editCompanys.dialogFormX()
        this.titleInfo.text = '创建' // 给弹层传参
      } else {
        this.$refs.editCompanys.dialogFormV()
        this.titleInfo.text = '编辑' // 给弹层传参
        this.hanldeEditForm(id)
      }
    },
    // 表单详情数据加载
    async hanldeEditForm (objeditId) {
      this.formData.id = objeditId
      const { data: res } = await detail(objeditId)
      // 获取详情 给formData
      this.formData = res
      this.provAndCity = res
    },
    // 修改状态
    async reState (data) {
      const obj = {
        id: data.id,
        state: data.state ? 0 : 1
      }
      await this.$confirm('此操作将修改状态 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
      await disabled(obj)
      this.getList(this.requestParameters)
      this.$message.success('修改成功!')
    },
    // 删除按钮
    async removeUser (user) {
      try {
        await this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
          type: 'warning'
        })
        await remove({ id: user })
        this.$message.success('成功删除了用户' + '!')
        this.dataList.splice(user, 1)
        this.getList(this.requestParameters)
      } catch (error) {
        this.$message.error('删除失败!')
      }
    },
    // 弹框关闭
    handleCloseModal () {
      this.$refs.editCompanys.dialogFormH()
    },
    // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      if (this.pc.provAndCity.city) {
        this.requestParameters.city = this.pc.provAndCity.city
        this.requestParameters.province = this.pc.provAndCity.province
        this.getList(this.requestParameters)
      } else {
        this.getList(this.requestParameters)
      }
    },
    // 清除搜素信息
    dleHandleFilter () {
      this.requestParameters = {}
      this.pc.provAndCity = {}
      this.getList(this.requestParameters)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getList(this.requestParameters)
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getList(this.requestParameters)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>
<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
